<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<a href="javascript:void(0);" @click="navigateTo('/index')" class="back-button">
				<i class="fa fa-arrow-left"></i> 返回
			</a>
			<p>商家信息</p>
		</header>

		<!-- 商家logo部分 -->
		<div class="business-logo">
			<img :src="business.businessImg">
		</div>

		<!-- 商家信息部分 -->
		<div class="business-info">
			<h1>{{ business.businessName }}</h1>
			<p>&#165;{{ this.toFixed2(business.starPrice) }}起送 &#165;{{ this.toFixed2(business.deliveryPrice) }}配送</p>
			<p>{{ business.businessExplain }}</p>
		</div>

		<!-- 食品列表部分 -->
		<ul class="food">
			<li v-for="(item, index) in foodArr">
				<div class="food-left">
					<img :src="item.foodImg">
					<div class="food-left-info">
						<h3>{{ item.foodName }}</h3>
						<p>{{ item.foodExplain }}</p>
						<p>&#165;{{ item.foodPrice }}</p>
					</div>
				</div>
				<div class="food-right">
					<div>
						<i class="fa fa-minus-circle" @click="minus(index)" v-show="item.quantity != 0"></i>
					</div>
					<p><span v-show="item.quantity != 0">{{ item.quantity }}</span></p>
					<div>
						<i class="fa fa-plus-circle" @click="add(index)"></i>
					</div>
				</div>
			</li>
		</ul>

		<!-- 购物车部分 -->
		<div class="cart">
			<div class="cart-left">
				<div class="cart-left-icon"
					:style="totalQuantity == 0 ? 'background-color:#505051;' : 'background-color:#3190E8;'"
					@click="showCartDetails = !showCartDetails">
					<i class="fa fa-shopping-cart"></i>
					<div class="cart-left-icon-quantity" v-show="totalQuantity != 0">{{ totalQuantity }}</div>
				</div>
				<div class="cart-left-info">
					<p>&#165;{{ totalPrice }}</p>
					<p>另需配送费{{ this.toFixed2(business.deliveryPrice) }}元</p>
				</div>
			</div>
			<div class="cart-right">
				<!-- 不够起送费 -->
				<div class="cart-right-item" v-show="totalSettle < business.starPrice"
					style="background-color: #535356;cursor: default;">
					&#165;{{ this.toFixed2(business.starPrice) }}起送
				</div>
				<!-- 达到起送费 -->
				<div class="cart-right-item" @click="toOrder" v-show="totalSettle >= business.starPrice">
					去结算
				</div>
			</div>
		</div>
		<!-- 购物车明细部分 -->
		<div class="cart-details" v-show="showCartDetails">
			<ul>
				<li v-for="(item, index) in foodArr" v-show="item.quantity > 0">
					<div class="food-left">
						<div class="food-left-info">
							<div style="display: flex; align-items: center;">
								<h3 style="margin-right: 10px;">{{ item.foodName }}</h3>
								<p style="display: flex; align-items: center;">
									&#165;{{ this.calculateTotalPrice(item.foodPrice, item.quantity) }}
								</p>
							</div>
						</div>
					</div>
					<div class="food-right">
						<div>
							<i class="fa fa-minus-circle" @click="minus(index)" v-show="item.quantity != 0"></i>
						</div>
						<p><span v-show="item.quantity != 0">{{ item.quantity }}</span></p>
						<div>
							<i class="fa fa-plus-circle" @click="add(index)"></i>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div style="height: 0.1vw;"></div>
	</div>
	<CustomAlert ref="customAlert" />
</template>

<script>
import CustomAlert from '../components/CustomAlert.vue';
import BigNumber from 'bignumber.js';

export default {
	name: 'BusinessInfo',
	data() {
		return {
			businessId: this.$route.query.businessId,
			business: {},
			foodArr: [],
			user: {},
			showCartDetails: false // 新增状态变量
		}
	},
	components: {
		CustomAlert
	},
	created() {
		this.user = this.$getSessionStorage('user');

		//根据businessId查询商家信息
		this.$axios.get(`Businesses/businessId/${this.businessId}`
		).then(response => {
			this.business = response.data;
		}).catch(error => {
			console.error(error);
		});

		//根据businessId查询所属食品信息
		this.$axios.get(`Foods/businessId/${this.businessId}`)
			.then(response => {
				this.foodArr = response.data;
				for (let i = 0; i < this.foodArr.length; i++) {
					this.foodArr[i].quantity = 0;
				}

				//如果已登录，那么需要去查询购物车中是否已经选购了某个食品
				if (this.user != null) {
					this.listCart();
				}
			}).catch(error => {
				console.error(error);
			});
	},
	methods: {
		navigateTo(url) {
            // 导航到指定页面
            this.$router.push({ path: url });
        },
		toFixed2(price) {
			return new BigNumber(price).toFixed(2);
		},
		calculateTotalPrice(price, quantity) {
			return new BigNumber(price).multipliedBy(quantity).toFixed(2);
		},
		listCart() {
			this.$axios.get(`/Carts/userId/${this.user.userId}?businessId=${this.businessId}`)
				.then(response => {
					let cartArr = response.data;
					//遍历所有食品列表
					for (let foodItem of this.foodArr) {
						foodItem.quantity = 0;
						for (let cartItem of cartArr) {
							if (cartItem.foodId == foodItem.foodId) {
								foodItem.quantity = cartItem.quantity;
							}
						}
					}
					this.foodArr.sort();
				}).catch(error => {
					console.error(error);
				});
		},
		add(index) {
			//首先做登录验证
			if (this.user == null) {
				this.$router.push({ path: '/login' });
				return;
			}

			if (this.foodArr[index].quantity == 0) {
				//做insert
				this.savaCart(index);
			} else {
				//做update
				this.updateCart(index, 1);
			}
		},
		minus(index) {
			//首先做登录验证
			if (this.user == null) {
				this.$router.push({ path: '/login' });
				return;
			}

			if (this.foodArr[index].quantity > 1) {
				//做update
				this.updateCart(index, -1);
			} else {
				//做delete
				this.removeCart(index);
			}
		},
		savaCart(index) {
			if (!this.user || !this.user.userId || !this.businessId) {
				console.error('用户ID或商家ID未定义');
				return;
			}
			this.$axios.post(`/Carts/userId/${this.user.userId}/businessId/${this.businessId}/foodId/${this.foodArr[index].foodId}`)
				.then(response => {
					if (response.data == 1) {
						//此食品数量要更新为1；
						this.foodArr[index].quantity = 1;
						this.foodArr.sort();
					} else {
						this.$refs.customAlert.showAlert('向购物车中添加食品失败！');
					}
				}).catch(error => {
					console.error(error);
				});
		},
		updateCart(index, num) {
			this.$axios.put(`/Carts/userId/${this.user.userId}/businessId/${this.businessId}/foodId/${this.foodArr[index].foodId}/quantity/${this.foodArr[index].quantity + num}`)
				.then(response => {
					if (response.data > 0) {
						//此食品数量要更新为1或-1；
						this.foodArr[index].quantity += num;
						console.log('update:', this.foodArr[index].quantity);
					} else {
						this.$refs.customAlert.showAlert('向购物车中更新食品失败！');
					}
				}).catch(error => {
					console.error(error);
				});
		},
		removeCart(index) {
			this.$axios.delete(`/Carts/userId/${this.user.userId}/businessId/${this.businessId}?foodId=${this.foodArr[index].foodId}`)
				.then(response => {
					if (response.data == 1) {
						//此食品数量要更新为0；视图的减号和数量要消失
						this.foodArr[index].quantity = 0;
					} else {
						this.$refs.customAlert.showAlert('从购物车中删除食品失败！');
					}
				}).catch(error => {
					console.error(error);
				});
		},
		toOrder() {
			this.$router.push({ path: '/orders', query: { businessId: this.business.businessId } });
		}
	},
	computed: {
		//食品总价格
		totalPrice() {
			let total = new BigNumber(0); // 使用 BigNumber 初始化 total
			for (let item of this.foodArr) {
				let foodPrice = new BigNumber(item.foodPrice); // 将 foodPrice 转换为 BigNumber
				total = total.plus(foodPrice.multipliedBy(item.quantity)); // 进行乘法和加法运算
			}
			return total.toFixed(2);
		},
		//食品总数量
		totalQuantity() {
			let quantity = 0;
			for (let item of this.foodArr) {
				quantity += item.quantity;
			}
			return quantity;
		},
		//结算总价格
		totalSettle() {
			return new BigNumber(this.totalPrice).plus(this.business.deliveryPrice).toFixed(2);
		}
	}
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;
}

.back-button {
	position: absolute;
	top: 3.5vw;
	/* 使用相对单位 */
	left: 2.5vw;
	/* 使用相对单位 */
	font-size: 4vw;
	/* 使用相对单位 */
	text-decoration: none;
	color: white;
	display: flex;
	align-items: center;
}

.back-button i {
	margin-right: 1vw;
	/* 使用相对单位 */
}

/* 针对大屏幕 (如 iPad) 的媒体查询 */
@media (min-width: 768px) {
	.wrapper header {
		height: 8vh;
		/* 使用相对高度单位 */
		font-size: 3vh;
	}

	.back-button {
		top: 2.5vh;
		/* 使用相对高度单位 */
		left: 2vh;
		font-size: 2.5vh;
		/* 相对大小单位 */
	}

	.back-button {
		position: absolute;
		top: 3.5vw;
		/* 使用相对单位 */
		left: 2.5vw;
		/* 使用相对单位 */
		font-size: 4vw;
		/* 使用相对单位 */
		text-decoration: none;
		color: white;
		display: flex;
		align-items: center;
	}

	.back-button i {
		margin-right: 1vw;
		/* 使用相对单位 */
	}

	/* 针对大屏幕 (如 iPad) 的媒体查询 */
	@media (min-width: 768px) {
		.wrapper header {
			height: 8vh;
			/* 使用相对高度单位 */
			font-size: 3vh;
		}

		.back-button {
			top: 2.5vh;
			/* 使用相对高度单位 */
			left: 2vh;
			font-size: 2.5vh;
			/* 相对大小单位 */
		}

		.back-button i {
			margin-right: 0.5vh;
		}
	}

	/****************** 商家logo部分 ******************/
	.wrapper .business-logo {
		width: 100%;
		height: 35vw;
		/*使用上外边距避开header部分*/
		margin-top: 12vw;

		display: flex;
		justify-content: center;
		align-items: center;
	}
}

/****************** 商家logo部分 ******************/
.wrapper .business-logo {
	width: 100%;
	height: 35vw;
	/*使用上外边距避开header部分*/
	margin-top: 12vw;

	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper .business-logo img {
	width: 40vw;
	height: 30vw;
	border-radius: 5px;
}

/****************** 商家信息部分 ******************/
.wrapper .business-info {
	width: 100%;
	height: 20vw;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.wrapper .business-info h1 {
	font-size: 5vw;
}

.wrapper .business-info p {
	font-size: 3vw;
	color: #666;
	margin-top: 1vw;
}

/****************** 食品列表部分 ******************/
.wrapper .food {
	width: 100%;
	/*使用下外边距避开footer部分*/
	margin-bottom: 14vw;
}

.wrapper .food li {
	width: 100%;
	box-sizing: border-box;
	padding: 2.5vw;
	user-select: none;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .food li .food-left {
	display: flex;
	align-items: center;
}

.wrapper .food li .food-left img {
	width: 20vw;
	height: 20vw;
}

.wrapper .food li .food-left .food-left-info {
	margin-left: 3vw;
}

.wrapper .food li .food-left .food-left-info h3 {
	font-size: 3.8vw;
	color: #555;
}

.wrapper .food li .food-left .food-left-info p {
	font-size: 3vw;
	color: #888;
	margin-top: 2vw;
}

.wrapper .food li .food-right {
	width: 16vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .food li .food-right .fa-minus-circle {
	font-size: 5.5vw;
	color: #999;
	cursor: pointer;
}

.wrapper .food li .food-right p {
	font-size: 3.6vw;
	color: #333;
}

.wrapper .food li .food-right .fa-plus-circle {
	font-size: 5.5vw;
	color: #0097EF;
	cursor: pointer;
}

/****************** 购物车部分 ******************/
.wrapper .cart {
	width: 100%;
	height: 14vw;

	position: fixed;
	left: 0;
	bottom: 0;

	display: flex;
	z-index: 1003;
}

.wrapper .cart .cart-left {
	flex: 2;
	background-color: #505051;
	display: flex;
}

.wrapper .cart .cart-left .cart-left-icon {
	width: 16vw;
	height: 16vw;
	box-sizing: border-box;
	border: solid 1.6vw #444;
	border-radius: 8vw;
	background-color: #3190E8;
	font-size: 7vw;
	color: #fff;

	display: flex;
	justify-content: center;
	align-items: center;

	margin-top: -4vw;
	margin-left: 3vw;

	position: relative;
}

.wrapper .cart .cart-left .cart-left-icon-quantity {
	width: 5vw;
	height: 5vw;
	border-radius: 2.5vw;
	background-color: red;
	color: #fff;
	font-size: 3.6vw;

	display: flex;
	justify-content: center;
	align-items: center;

	position: absolute;
	right: -1.5vw;
	top: -1.5vw;
}

.wrapper .cart .cart-left .cart-left-info p:first-child {
	font-size: 4.5vw;
	color: #fff;
	margin-top: 1vw;
}

.wrapper .cart .cart-left .cart-left-info p:last-child {
	font-size: 2.8vw;
	color: #AAA;
}

.wrapper .cart .cart-right {
	flex: 1;
}

/*达到起送费时的样式*/
.wrapper .cart .cart-right .cart-right-item {
	width: 100%;
	height: 100%;
	background-color: #38CA73;
	color: #fff;
	font-size: 4.5vw;
	font-weight: 700;
	user-select: none;
	cursor: pointer;

	display: flex;
	justify-content: center;
	align-items: center;
}

/* 购物车明细部分 */
.cart-details {
	position: fixed;
	bottom: 16vw;
	left: 0;
	width: 100%;
	background-color: #f5fafe;
	border-top: 1px solid #ccc;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	z-index: 1002;
	border-radius: 10px 10px 0 0;
	/* 增加圆角 */
	overflow: hidden;
	/* 防止内容超出圆角 */
	transition: transform 0.3s ease-in-out;
	/* 增加动画效果 */
}

.cart-details ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cart-details li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 0px;
	transition: background-color 0.3s ease-in-out;
	/* 增加动画效果 */
}

.cart-details li:hover {
	background-color: #f9f9f9;
	/* 增加悬停效果 */
}

.cart-details .food-left-info h3 {
	font-size: 4vw;
	color: #555;
	font-weight: 600;
	/* 增加字体粗细 */
}

.cart-details .food-left-info p {
	font-size: 3vw;
	color: #333;
	margin-top: 1vw;
}

.cart-details .food-right {
	display: flex;
	align-items: center;
}

.cart-details .food-right .fa-plus-circle {
	font-size: 5vw;
	color: #0097EF;
	cursor: pointer;
	transition: color 0.3s ease-in-out;
	/* 增加动画效果 */
}

.cart-details .food-right .fa-plus-circle:hover {
	color: #007acc;
	/* 增加悬停效果 */
}

.cart-details .food-right .fa-minus-circle {
	font-size: 5vw;
	color: #999;
	cursor: pointer;
	transition: color 0.3s ease-in-out;
	/* 增加动画效果 */
}

.cart-details .food-right .fa-minus-circle:hover {
	color: #666;
	/* 增加悬停效果 */
}

.cart-details .food-right p {
	margin: 0 15px;
	color: #434040;
	font-size: 3.5vw;
	font-weight: 500;
	/* 增加字体粗细 */
}

/*不够起送费时的样式（只有背景色和鼠标样式的区别）*/
/*
	.wrapper .cart .cart-right .cart-right-item{
		width: 100%;
		height: 100%;
		background-color: #535356;
		color: #fff;
		font-size: 4.5vw;
		font-weight: 700;
		user-select: none;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
	*/
</style>